<template>
	<view class="bg-white">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">合同续签详情</block>
		</cu-custom>
		<view style="padding: 15px;">
			<!-- <view style="text-align: center;background-color: #fae1e1;border-radius: 10px;padding: 10px;">
				<text style="color: #101317;font-weight: 400;font-size: 12px;">
					劳务合同转劳务合同
				</text>
			</view>
			<view style="background-color: #e1ebfa;border-radius: 10px;padding: 10px;margin-top: 10px;">
				<view>
					<text style="color: #101317;font-weight: 400;font-size: 12px;">
						劳务合同续签：{{renewalTime}}
					</text>
				</view>
				<view style="margin-top: 10px;">
					<text style="color: #101317;font-weight: 400;font-size: 12px;">
						距离退休还有：{{retireTime}}
					</text>
				</view>
			</view> -->
			<view class="action" style="margin-bottom: 10px;">
				<text class="cuIcon-titles " style="color: #1E5EFF;"></text>
				<text style="color: #000000;font-weight: bold;font-size: 30rpx;">
					基础信息
				</text>
			</view>
			<view style="margin-top: 20px;">
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						姓名
					</view>
					<view class="flex-sub padding-sm margin-xs radius" style="color: #4591FE;">
						{{dataObj.realname}}
					</view>
				</view>
				<!-- <view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						姓名
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.realname}}
					</view>
				</view> -->
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						性别
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.sex_dictText}}
					</view>
				</view>
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						身份证号
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.idCard}}
					</view>
				</view>
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						工号
					</view>
					<view class="flex-sub padding-sm margin-xs radius" style="color: #4591FE;">
						{{dataObj.workNo}}
					</view>
				</view>
				<!-- <view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						年龄
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.age}}
					</view>
				</view> -->
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						联系电话
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.phone}}
					</view>
				</view>
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						年龄
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.age}}
					</view>
				</view>
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						出生年月
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.birthday != null ? dataObj.birthday : null}}
					</view>
				</view>
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						公司
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.company_dictText}}
					</view>
				</view>
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						部门编码名称
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.departName}}
					</view>
				</view>
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						进厂时间
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.inTime != null ? dataObj.inTime : null}}
					</view>
				</view>
				<!-- <view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						部门
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.orgCodeTxt}}
					</view>
				</view> -->
				<!-- <view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						部门
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						<view
							style="background-color: #e1ebfa;padding: 5px 10px;margin-top: -5px;width: 70px;border-radius: 2px;">
							<image src="@/static/images/gongsi.png" style="width: 12px;height: 12px;margin-right: 5px;">
							</image>
							<text style="color: #101317;font-size: 13px;font-weight: 500;">
								{{dataObj.orgCodeTxt}}
							</text>
						</view>
					</view>
				</view> -->
				<!-- <view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						职务
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.post}}
					</view>
				</view> -->
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						工龄
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.seniority}}
					</view>
				</view>
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						分类
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.classification}}
					</view>
				</view>
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						合同类型
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.signType_dictText}}
					</view>
				</view>
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						合同类型
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.contractType_dictText}}
					</view>
				</view>
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						岗位
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.post}}
					</view>
				</view>
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						班次
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.classes}}
					</view>
				</view>
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						计费标准
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.freightBasis_dictText}}
					</view>
				</view>
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						续签合同开始日期
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						<!-- {{dataObj.contractStartTime}} -->
						{{dataObj.contractStartTime != null ? dataObj.contractStartTime : null}}
					</view>
				</view>
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						续签合同结束日期
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						<!-- {{dataObj.contractEndTime}} -->
						{{dataObj.contractEndTime != null ? dataObj.contractEndTime : null}}
					</view>
				</view>
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						续签合同签订时间
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						<!-- {{dataObj.contractSigningTime}} -->
						{{dataObj.contractSigningTime != null ? dataObj.contractSigningTime : null}}
					</view>
				</view>
				<view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						续签合同间隔时间
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.daysFromSigning}}
					</view>
				</view>
				<!-- <view class="flex" style="width: 300px;">
					<view class="flex-sub padding-sm margin-xs radius textStyle">
						经办人
					</view>
					<view class="flex-sub padding-sm margin-xs radius">
						{{dataObj.operator}}
					</view>
				</view> -->
			</view>
			<view style="margin-top: 10px;background-color: #F9F9F9;border-radius: 10px;padding: 15px 25px;">
				<view style="display: flex;">
					<view style="width: 20px;height: 20px;background-color: #34B483;border-radius: 50%;"></view>
					<span style="margin-left: 15px;color:#101317;font-weight: 500;">合同附件</span>
					<!-- <image class="nav-right-image" src="@/static/images/xiazai.png"></image> -->
					<!-- <a style="margin-left: 15px;color: #4591FE;" @click="reUpload">重新上传</a> -->
				</view>
				<view v-for="(item, index) in dataObj.contractFiles" :key="index">
					{{item.contractFile}}
				</view>
				<view style="display: flex;margin-top: 15px;">
					<view style="width: 20px;height: 20px;background-color: #34B483;border-radius: 50%;"></view>
					<span style="margin-left: 15px;color:#101317;font-weight: 500;">合同补充条款福建</span>
					<!-- <image class="nav-right-image" src="@/static/images/xiazai.png"></image> -->
				</view>
				<view v-for="(item, index) in dataObj.contractSupplements" :key="index">
					{{item.contractSupplementFile}}
				</view>
			</view>
			<view style="margin-top: 15px;">
				<view class="action" style="margin-bottom: 10px;">
					<text class="cuIcon-titles " style="color: #1E5EFF;"></text>
					<text style="color: #000000;font-weight: bold;font-size: 30rpx;">
						审批记录
					</text>
				</view>
				<view style="background-color: #f4f4f4;border-radius: 10px;margin-top: 10px;">
					<view class="cu-timeline" v-for="(item,index) in approvalRecords">
						<view class="cu-item text-green cuIcon-roundcheckfill">
							<view style="display: flex;color: #000000;">
								<view style="width: 25px;">
									<text
										style="margin-left: -18px;margin-top: 5px;display: block;font-weight: bold;">{{item.currentNodeDictText}}</text>
								</view>
								<view style="margin-left: 20px;">
									<view>
										<text style="font-size: 28rpx;">{{item.approverDictText}}</text>
										<text
											style="display: inline-block;padding: 2px;background-color: #d9d9d9;border-radius: 5px;font-size: 16rpx;margin-left: 10px;color: #a1a1a1;">{{item.remark}}</text>
										<text v-if="item.approvalStatusDictText == '同意'"
											style="display: inline-block;padding: 4rpx 10rpx;background-color: #34b483;border-radius: 5px;font-size: 16rpx;margin-left: 15px;color: #FFFFFF;">{{item.approvalStatusDictText}}</text>
										<text v-if="item.approvalStatusDictText == '待审'"
											style="display: inline-block;padding: 4rpx 10rpx;background-color: #c6ffbe;border-radius: 5px;font-size: 16rpx;margin-left: 15px;color: #48B237;">{{item.approvalStatusDictText}}</text>
										<text v-if="item.approvalStatusDictText == '驳回'"
											style="display: inline-block;padding: 4rpx 10rpx;background-color: #f5222d;border-radius: 5px;font-size: 16rpx;margin-left: 15px;color: #FFFFFF;">{{item.approvalStatusDictText}}</text>
										<text v-if="item.approvalStatusDictText == '结束'"
											style="display: inline-block;padding: 4rpx 10rpx;background-color: #D9D9D9;border-radius: 5px;font-size: 16rpx;margin-left: 15px;color: #A0A0A0;">{{item.approvalStatusDictText}}</text>
									</view>
									<view>
										<text style="font-size: 24rpx;">{{item.approvalTypeDictText}}</text>
										<text
											style="font-size: 20rpx;color: #c7c7c7;margin-left: 15px;">{{item.createTime}}</text>
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment';
	export default {
		data() {
			return {
				renewalTime: '10天',
				retireTime: '235天',
				dataObj: {
					staff: 'BXS21839-杨慧',
					name: '杨慧',
					workNumber: 'BXS21839',
					age: '23',
					company: '福建华源纺织',
					dept: '白班',
					post: '生产线细沙',
					workAge: '13',
					contractType: '劳务合同',
					startTime: '2023/10/05',
					endTime: '2025/10/05',
					intervalTime: '三个月',
					handledBy: '朱俊芳',
				},
				approvalRecords: [{
					title: '总经理',
					name: '陈婷婷',
					area: '手写区域',
					state: '同意',
					manager: '企管',
					dateTime: '2023/10/10 12:00'
				}, {
					title: '车间',
					name: '陈婷婷',
					area: '手写区域',
					state: '同意',
					manager: '企管',
					dateTime: '2023/10/10 12:00'
				}, {
					title: '填写申请单',
					name: '陈婷婷',
					area: '手写区域',
					state: '提交',
					manager: '企管',
					dateTime: '2023/10/10 12:00'
				}]
			}
		},
		onLoad: function(options) {
			this.dataObj.id = options.id;
			// 在这里可以使用获取到的 id 参数进行后续操作
		},
		mounted() {
			this.getDetail()
		},
		create() {

		},
		computed: {

		},
		methods: {
			getDetail() {
				this.$http.get(
						"/crm_contract/crmContract/queryDetail/" +
						this.dataObj.id)
					.then(res => {
						if (res.data.success) {
							console.log('合同续签详情',res.data)
							this.dataObj = res.data.result
							// this.dataObj['avatar'] = this.getFileAccessHttpUrl(this.dataObj['avatar'])
							// console.log(this.dataObj['avatar'])
							this.approvalRecords = this.dataObj.approvalRecords
						}
					})
			},
			urging(id) {
				const params = {
					applicationId: id,
					approvalType: 1
				}
				this.$http.get("/crm_on_hand/crmOnHand/urge", {
						params: params
					})
					.then(res => {
						if (res.data.success) {
							this.$refs.urgingPopup.open('center')
						}
					})
			},
			reUpload() {
				console.log('重新上传')
			}
		}
	}
</script>

<style>
	.cu-form-group {
		background-color: #ffffff;
		line-height: 15px;
		padding: 0.5px 15px;
		display: flex;
		align-items: center;
		min-height: 42px;
		justify-content: space-between;
	}

	.cu-form-group uni-picker .picker {
		line-height: 15px;
		font-size: 15px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		width: 100%;
		text-align: right;
	}

	.cu-form-group uni-picker::after {
		font-family: cuIcon;
		line-height: 15px;
		display: block;
		content: "\e6a3";
		position: absolute;
		font-size: 17px;
		color: #8799a3;
		width: 31px;
		text-align: center;
		top: 0;
		bottom: 0;
		right: -10px;
		margin: auto;
	}

	/deep/ .uni-radio-input {
		width: 15px;
		height: 15px;
	}

	.nav-right-image {
		width: 40rpx;
		height: 40rpx;
		margin-left: 15px;
	}

	.padding-sm {
		padding: 5px;
	}

	.textStyle {
		font-size: 13px;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #101317;
		line-height: 22px;
	}
</style>